<template>
    <div class="player-wrap">
        <div class="content">
            <cover-image :src="poster">
                <div v-if="formatDuration" class="bar">
                    <span>{{formatDuration}}</span>
                </div>                    
            </cover-image>
            <div class="player" ref="playerRef"></div>
        </div>
        <div v-if="!enable" class="mask" v-html="maskContent"></div>
    </div>
</template>

<script>
import { ref, onMounted, computed, onBeforeUnmount, watch } from 'vue'
import { Toast } from 'vant'
import { formatTime } from '@/utils'
import Player from 'xgplayer/dist/simple_player'
import volume from 'xgplayer/es/controls/volume'
import playbackRate from 'xgplayer/es/controls/playbackRate'
import progress from 'xgplayer/es/controls/progress'
import 'xgplayer-mp4'
import CoverImage from '@/components/CoverImage'
export default {
    name: 'VideoPlayer',
    components: {
        CoverImage
    },
    props: {
        // 视频地址
        url: {
            type: String
        },
        // 封面图地址
        poster: {
            type: String            
        },
        /* // 封面图尺寸
        posterSize: {
            type: String,
            default: '@480w_270h_1c'
        }, */
        // 观看数
        play: {
            type: Number
        },
        // 弹幕数
        danmaku: {
            type: Number
        },
        // 时长
        duration: {
            type: [Number, String]
        },
        // 是否允许播放
        enable: {
            type: Boolean,
            default: true
        },
        // 不允许播放的提示
        maskContent: {
            type: String
        }
    },
    setup(props) {
        const playerRef = ref(null)
        const formatDuration = computed(() => formatTime(props.duration || ''))
        let player = null
        const destroyPlayer = () => {
            player?.destroy()
            player = null
        }
        const initPlayer = () => {            
            if (!props.url) {
                return
            }
            if (player) {
                if (player.hasStart) {
                    player.pause()
                    player.src = props.url
                } else {
                    player.start(props.url)
                }                    
                return                
            }
            player = new Player({
                el: playerRef.value,
                preloadTime: 15,
                url: props.url,          
                fluid: true,
                'x5-video-player-type': 'h5',
                playsinline: true,
                controlPlugins: [
                    volume,
                    playbackRate,
                    progress
                ],
                playbackRate: [0.5, 1, 1.25, 1.5, 2]
            })    
            bindEvent()          
        }
        const bindEvent = () => {
            player.once('bufferedChange', () => {
                Toast.loading({
                    message: '视频加载中...',
                    forbidClick: true
                })
            })
            player.once('canplay', () => {
                Toast.clear()
            })              
        }

        onMounted(() => {
            initPlayer()
        })

        onBeforeUnmount(() => {
            destroyPlayer()
        })

        watch(() => props.url, () => {
            initPlayer()
        })

        return {
            playerRef,
            formatDuration
        }
    }
}
</script>

<style lang="scss" scoped>
    .player-wrap {
        position: relative;
        padding-top: 270/480*100%;
        background: {
            color: $color-grey;
            size: 36%;
            image: url('~@/assets/images/placeholder.png');
            repeat: no-repeat;
            position: 50%;
        }
    }
    .content, .player {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .player {
        background: rgba(0,0,0,.1);
    }
    .bar {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 10px;
        color: $color-white;
        display: flex;
        justify-content: flex-end;
        background-image: linear-gradient(transparent 2%,rgba(0,0,0,.7) 98%);
    }
    .mask {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-size: 14px;
        width: 100%;
        height: 100%;
        color: $color-white;
        background-color: rgba(0,0,0,.5);
    }
</style>